<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <div class="container"></div>
    <script>
      //创建新元素 去覆盖之前的老元素达到文字变色的效果
      var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      console.log(str);
      var containerEle = document.querySelector(".container");
      for (var i = 0; i < str.length; i++) {
        //for循环去给每个字符串字符创建一个span
        var spanEle = document.createElement("span");
        // console.log(spanEle);
        spanEle.innerHTML = str[i]; //给每个span写入innerHTML = 字符串的字符  也就是循环出来的str[i]
        containerEle.appendChild(spanEle); //span外面肯定是要包个大盒子,就在大盒子里面appendChild(spanEle)
      } //到这里就已经完成了把每个span写到container里面
      //
      //
      //
      //
      /*  var spans = containerEle.querySelectorAll("span"); //选择所有的span
           var index = 0; //声明一个值,后面if判断成功的话会++
           document.onkeydown = function (e) {
             //键入
             var key = e.key.toUpperCase(); //把键入值都切换大写
             console.log(key);
             // console.log(key==spans[index].innerText);
             if (key == spans[index].innerText) {
               //键入的值等于目前第[0]个span的innerText
               spans[index].style.color = "red"; //就改变span的颜色
               index++;
             }
           };
      */
      //
      //
      //
      //
      //
      var spans = containerEle.querySelectorAll("span");
      document.onkeydown = function (e) {
        var key = e.key.toUpperCase();
        // console.log(key);
        spans.forEach(function (item) {
          if (item.innerText == key) {
            // console.log(item);
            item.style.color = "cyan";
            item.style.fontSize = "50px";
          }
        });
      };
    </script>
  </body>
</html>
